<script setup lang="ts">
import { ref } from "vue";
import Daughter from "./Daughter.vue";
import Son from "./Son.vue";

const money = ref(100000000);

const son = ref();

const handler = () => {
  const amount = 10;
  if (son.value.money < amount) {
    alert("做个人吧！再借曹植就喝西北风了！");
    return;
  }
  money.value += amount;
  son.value.money -= amount;
};

defineExpose({ money });
</script>

<template>
  <div class="box">
    <h1>我是父组件曹操 {{ money }}</h1>
    <div style="margin-bottom: 1em">
      <button @click="handler">向曹植借10元</button>
    </div>
    <div class="children">
      <Son ref="son" />
      <Daughter />
    </div>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
  min-height: 400px;
  background: bisque;
  padding: 1rem;
}
.children {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1em;
}
</style>
